<template>
	<view class="nav" :style="{'height':navBarHeight+ 'px'}">
		<!-- 标题 -->
		<view class="capsule-box"
			:style="{'height': menuHeight + 'px','min-height': menuHeight + 'px','line-height': menuHeight + 'px', 'bottom': menuBottom + 'px'}">
			<view class="nav-handle">
				<view class="back"></view>
				<view class="home">
					消息通知
				</view>
				<view class="right"></view> 
			</view>
		</view>
		<view class="wrap">
			<image class="top-bg" src="https://shops.cg500.com/static/aijiu/message_bg@2x.png" mode=""></image>
			<view class="top">
				<view class="top-lf">
					<image class="top-lf-img" src="https://shops.cg500.com/static/aijiu/message-icon@2x.png" mode=""></image>
				</view>
				<view class="top-rg">
					<view class="top-rg-title">
						消息通知
					</view>
					<view class="top-rg-text">
						关注公众账号，消息提醒更及时~
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="list-item-lf">
						<image class="list-item-lf-img" src="https://shops.cg500.com/static/aijiu/message-list-icon@2x.png" mode=""></image>
					</view>
					<view class="list-item-rg">
						<view class="" style="display: flex;flex-direction: column;justify-content: center;">
							<view class="list-item-rg-title">
								{{item.title}}
							</view>
							<view class="list-item-rg-desc">
								{{item.desc}}
							</view>
						</view>
						<view class="list-item-rg-time">
							{{item.time}}
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		
		
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuBottom: 0,
				menuRight: 0,
				menuHeight: 0,
				navHeight: 0,
				navBarHeight: 0,
				list: [
					{
						title: '共享艾灸公告',
						desc: '共享艾灸欢迎您',
						time: '2023-04-23 16:14:25'
					},
					{
						title: '开业特惠！！',
						desc: '新用户 充值300 赠送...',
						time: '2023-04-23 16:14:25'
					}
				]
			}
		},
		onLoad() {
			// this.getConfig()
			this.calcNavBarInfo()
		},
		methods: {
			calcNavBarInfo () {
			    // 获取系统信息
			    const systemInfo = wx.getSystemInfoSync();
			    // 胶囊按钮位置信息
			    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			    // 导航栏高度 = 状态栏到胶囊的间距（胶囊上坐标位置-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
			    this.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
			    // 状态栏和菜单按钮(标题栏)之间的间距
				// 等同于菜单按钮(标题栏)到正文之间的间距（胶囊上坐标位置-状态栏高度）
			    this.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;
			    // 菜单按钮栏(标题栏)的高度
			    this.menuHeight = menuButtonInfo.height;
			  },
			getConfig() {
				uni.getSystemInfo({
					success: res => {
						let menuButtonInfo = {}
						if (res.platform === 'ios') {
							// ios设备的胶囊按钮都是固定的
							menuButtonInfo = {
								width: 87,
								height: 32,
								left: res.screenWidth - 7 - 87,
								right: res.screenWidth - 7,
								top: res.statusBarHeight + 4,
								bottom: res.statusBarHeight + 4 + 32
							}
						} else {
							// 安卓通过api获取
							menuButtonInfo = uni.getMenuButtonBoundingClientRect()
						}
						console.log('获取胶囊信息：', menuButtonInfo);
						// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上未知-状态栏高度）* 2 + 胶囊高度 + 状态栏高度
						this.navHeight = (menuButtonInfo.top - res.statusBarHeight) * 2 + menuButtonInfo
							.height + res.statusBarHeight;
						console.log('navHeight:', this.navHeight);
						// 按钮上下边距高度
						this.menuBottom = menuButtonInfo.top - res.statusBarHeight;
						// 导航栏右边到屏幕边缘的距离
						this.menuRight = res.screenWidth - menuButtonInfo.right;
						// 导航栏高度
						this.menuHeight = menuButtonInfo.height;
					},
					fail(err) {}
				})
			}
		}
	}
</script>

<style>
	@import url("./index.css");
</style>